<script setup lang="ts">
import {computed, onMounted, reactive} from "vue";
import card1 from '@/assets/images/attractInvest/card1.png'
import card2 from '@/assets/images/attractInvest/card2.png'
import card3 from '@/assets/images/attractInvest/card3.png'
import card4 from '@/assets/images/attractInvest/card4.png'
import card5 from '@/assets/images/attractInvest/card5.png'
import card6 from '@/assets/images/attractInvest/card6.png'
import card7 from '@/assets/images/attractInvest/card7.png'
import card8 from '@/assets/images/attractInvest/card8.png'
import card9 from '@/assets/images/attractInvest/card9.png'
import con1 from '@/assets/images/attractInvest/con1.png'
import con2 from '@/assets/images/attractInvest/con2.png'
import con3 from '@/assets/images/attractInvest/con3.png'
import con4 from '@/assets/images/attractInvest/con4.png'
import con5 from '@/assets/images/attractInvest/con5.png'
import con6 from '@/assets/images/attractInvest/con6.png'
import bg1 from '@/assets/images/service-card-bg.png'
import {applyService, getAreaList} from "@/utils/request";
import {exeAnimat} from "@/utils";

onMounted(() => {
  exeAnimat()
})

const vueData=reactive({
  cardList:[
    {
      icon:card1,
      title:'区域交易额收益',
      detail:'享受代理区域内所有合作商家<br>和渠道商的交易额分润'
    },
    {
      icon:card2,
      title:'区域让利流水收益',
      detail:'享受代理区域内所有合作商家<br>的让利流水分润'
    },
    {
      icon:card3,
      title:'区域购物分红',
      detail:'享受代理区域的商城购物金额分润'
    },
  ],
  supporList:[
    {
      icon:card4,
      title:'培训支持',
      cls:'btn-scale',
      detail:'不定期免费培训'
    },
    {
      icon:card5,
      title:'物料支持',
      cls:'btn-scale-4',
      detail:'统一平台形象 统一对外宣传'
    },
    {
      icon:card6,
      title:'市场推广',
      cls:'btn-scale-2',
      detail:'公众号推广、线下活动推 广、官网推广、广告推广'
    },
    {
      icon:card7,
      title:'技术支持',
      cls:'btn-scale-3',
      detail:'提供在线技术服务 保障问 题高效、快速的解决 服务 商、客户没有后顾之忧'
    },
    {
      icon:card8,
      title:'客服支持',
      cls:'btn-scale-1',
      detail:'电话客服、全天候网络客 服，随时随地贴心陪伴答 疑解惑'
    },
    {
      icon:card9,
      title:'品牌支持',
      cls:'btn-scale-5',
      detail:'鲸喜多多'
    },
  ],
  consList:[
    {
      icon: con1,
      cls:'btn-scale',
      title:'具备企业资质',
      detail:'具备企业资质'
    },
    {
      icon: con2,
      cls:'btn-scale-4',
      title:'认可鲸喜多多文化',
      detail:'具备企业资质'
    },
    {
      icon: con3,
      cls:'btn-scale-2',
      title:'具备业务能力',
      detail:'具备企业资质'
    },
    {
      icon: con4,
      cls:'btn-scale-3',
      title:'具备客户资源',
      detail:'具备企业资质'
    },
    {
      icon: con5,
      cls:'btn-scale-1',
      title:'具备销售团队',
      detail:'具备企业资质'
    },
    {
      icon: con6,
      cls:'btn-scale-5',
      title:'具有合作意愿',
      detail:'具备企业资质'
    },
  ],
  areaList:[],

  provinceId:'',
  cityId:'',
  areaId:'',

  contact_name:'',
  contact_tel:'',
  seller_name:'',

  dialog: false,
  loading:false
})
const cityList=computed(()=>{
  let obj=vueData.areaList.find(t=>t.id === vueData.provinceId)
  if (obj && obj.below_area.length){
    return obj.below_area
  }
  vueData.cityId=''
  vueData.areaId=''
  return []
})
const areaList=computed(()=>{
  let obj=vueData.areaList.find(t=>t.id === vueData.provinceId)
  if (obj && obj.below_area.length){
    let obj1=obj.below_area.find(t=>t.id === vueData.cityId)
    if (obj1 && obj1.below_area.length){
      return obj1.below_area
    }
  }
  vueData.cityId=''
  vueData.areaId=''
  return []
})
const init=()=>{
  getAreaList().then(res=>{
    vueData.areaList=res.data.data
  })
}
init()
const rules={
  province:[
    (value:string) => {
      if (value) return true
      return '请选择省份'
    },
  ],
  city:[
    (value:string) => {
      if (value) return true
      return '请选择城市'
    },
  ],
  area:[
    (value:string) => {
      if (value) return true
      return '请选择县/区'
    },
  ],
  contact_name:[
    (value:string) => {
      if (value) return true
      return '请输入联系人'
    },
  ],
  contact_tel:[
    (value:string) => {
      if (value) return true
      return '请输入联系人电话'
    },
  ],
}
const submit=()=>{
  if (!(vueData.provinceId && vueData.cityId && vueData.areaId)) return
  if (!vueData.contact_name) return;
  if (!vueData.contact_tel) return;
  let obj=vueData.areaList.find(t=>t.id === vueData.provinceId)
  let obj1=obj.below_area.find(t=>t.id === vueData.cityId)
  let obj2=obj1.below_area.find(t=>t.id === vueData.areaId)

  vueData.loading=true
  applyService({
    seller_name: vueData.seller_name,
    contact_name: vueData.contact_name,
    contact_tel: vueData.contact_tel,
    province: obj.title,
    city: obj1.title,
    area: obj2.title,
  }).then(res=>{
    if (res.code===200){
      setTimeout(()=>{
        vueData.loading=false
        vueData.seller_name=''
        vueData.contact_name=''
        vueData.contact_tel=''

        vueData.dialog=true
        setTimeout(()=>{
          vueData.dialog=false
        },3000)
      },1000)
    }
  })
}
</script>

<template>
<div class="pt-60px">
  <div>
    <v-dialog v-model="vueData.dialog" width="auto">
      <v-alert
        type="success"
        title="提交成功"
        text="我们的运营专家会很快联系您"
      ></v-alert>
    </v-dialog>
  </div>
  <div class="h-500px bg-hex-F4F5F9">
    <v-container class="flex items-center">
      <div class="flex-1 flex">
        <div class="ml-auto mr-30px">
          <div class="text-40px mb-30px left-in-1">鲸喜多多着力</div>
          <div class="text-40px mb-20px left-in-2">打造100家标杆服务商</div>
          <div class="text-22px mb-30px left-in-2 font-normal leading-36px text-hex-666768">强强联合助力腾飞，共同开拓亿万商家服务市场<br>现在加盟，全套招商宝典免费送！</div>
          <div class="btn-scale">
            <v-btn
              color="primary"
              height="40px"
              width="160px"
              variant="flat">
              <span class="text-24px">我要代理</span>
            </v-btn>
          </div>
        </div>
      </div>
      <div class="flex-1">
        <v-img class="right-in-1" src="@/assets/images/attractInvest/bg1.png" height="500px"></v-img>
      </div>
    </v-container>
  </div>
  <v-container class="!pt-60px !pb-100px">
    <div class="pb-60px text-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">成为鲸喜多多服务商，低门槛，高回报</div>
    </div>
    <div class="flex items-stretch justify-between">
      <v-card
        v-for="(item,index) in vueData.cardList" :key="index"
        variant="elevated"
        elevation="2"
        class="h-380px w-340px !rounded-17px flex-col flex items-center p-20px">
        <template v-slot:title>
          <div class="flex-col flex items-center">
            <div class="w-120px h-120px rounded-full mb-40px">
              <v-img class="btn-scale" width="100%" aspect-ratio="1/1" cover :src="item.icon"></v-img>
            </div>
            <div class="text-26px leading-30px mb-10px bottom-fade-in-1">{{ item.title }}</div>
          </div>
        </template>
        <template v-slot:text>
          <div class="text-17px text-center leading-36px bottom-fade-in-2" v-html="item.detail"></div>
        </template>
      </v-card>
    </div>
  </v-container>
  <v-container class="!pb-100px">
    <div class="pb-80px text-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">我们为服务商准备了这些扶持政策</div>
    </div>
    <div class="flex items-stretch justify-between">
      <v-row no-gutters>
        <v-col v-for="(item,index) in vueData.supporList" :key="index" cols="12" sm="4">
          <div :class="item.cls" class="m-30px h-170px border-1px border-solid border-hex-EA612F p-30px flex items-center justify-between">
            <div class="h-full mr-60px">
              <div class="text-24px mb-6px">{{ item.title }}</div>
              <div class="text-16px leading-22px text-hex-969999">{{ item.detail }}</div>
            </div>
            <div>
              <v-img :src="item.icon" class="rounded-full" width="64" height="64"></v-img>
            </div>
          </div>
        </v-col>
      </v-row>
    </div>
  </v-container>
  <v-container class="!pb-100px">
    <div class="pb-80px text-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">鲸喜多多需要服务商具备的条件</div>
    </div>
    <div class="flex items-stretch justify-between">
      <v-row no-gutters>
        <v-col v-for="(item,index) in vueData.consList" :key="index" cols="12" sm="4">
          <div :class="item.cls" class="p-30px flex flex-col items-center justify-between">
            <v-img :src="item.icon" class="mb-30px" content width="80" height="70"></v-img>
            <div class="text-24px mb-18px">{{ item.title }}</div>
            <div class="text-16px leading-22px text-hex-969999">{{ item.detail }}</div>
          </div>
        </v-col>
      </v-row>
    </div>
  </v-container>
  <div>
    <div class="py-50px text-center tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">合作方式</div>
    </div>
    <v-parallax height="400px" src="@/assets/images/jxdd/card4.png">
      <div class="flex items-center justify-center h-full">
        <v-container class="flex items-center">
          <div class="w-580px left-in-1 mr-30px h-200px flex items-center justify-between px-50px bg-cover rounded-14px" :style="{'background-image': 'url('+bg1+')'}">
            <div class="text-30px">城市服务商</div>
            <div>
              <v-img src="@/assets/images/attractInvest/service.png" content width="82" height="82"></v-img>
            </div>
          </div>
          <div class="w-580px right-in-1 h-200px flex items-center justify-between px-50px bg-cover rounded-14px" :style="{'background-image': 'url('+bg1+')'}">
            <div class="text-30px">区县服务商</div>
            <div>
              <v-img src="@/assets/images/attractInvest/map.png" content width="82" height="82"></v-img>
            </div>
          </div>
        </v-container>
      </div>
    </v-parallax>
  </div>
  <v-container class="!pt-100px !pb-100px">
    <div class="pb-60px text-center mb-20px tracking-3px">
      <div class="text-36px mb-30px bottom-fade-in-2">加盟流程</div>
      <div class="text-18px text-hex-96999C bottom-fade-in-3">平台为生态伙伴提供更多场景，更多技术环境，更多商业发展空间</div>
    </div>
    <div class="flex items-center justify-around mb-10px">
      <div class="left-distance-1 flex flex-col items-center">
        <v-img src="@/assets/franchisee/franc1.png" content width="82" height="82"></v-img>
        <div class="text-hex-96999C text-18px mt-6px">申请提交</div>
      </div>
      <div class="left-distance-2 mx-30px mb-30px">
        <v-img src="@/assets/franchisee/arrows.png" content width="20" height="20"></v-img>
      </div>
      <div class="left-distance-2 flex flex-col items-center">
        <v-img src="@/assets/franchisee/franc2.png" content width="82" height="82"></v-img>
        <div class="text-hex-96999C text-18px mt-6px">合作洽谈</div>
      </div>
      <div class="left-distance-3 mx-30px mb-30px">
        <v-img src="@/assets/franchisee/arrows.png" content width="20" height="20"></v-img>
      </div>
      <div class="left-distance-3 flex flex-col items-center">
        <v-img src="@/assets/franchisee/franc3.png" content width="82" height="82"></v-img>
        <div class="text-hex-96999C text-18px mt-6px">签订协议</div>
      </div>
      <div class="left-distance-4 mx-30px mb-30px">
        <v-img src="@/assets/franchisee/arrows.png" content width="20" height="20"></v-img>
      </div>
      <div class="left-distance-4 flex flex-col items-center left-in-2">
        <v-img src="@/assets/franchisee/franc3.png" content width="82" height="82"></v-img>
        <div class="text-hex-96999C text-18px mt-6px">业务培训</div>
      </div>
      <div class="left-distance-5 mx-30px mb-30px">
        <v-img src="@/assets/franchisee/arrows.png" content width="20" height="20"></v-img>
      </div>
      <div class="left-distance-5 flex flex-col items-center left-in-1">
        <v-img src="@/assets/franchisee/franc3.png" content width="82" height="82"></v-img>
        <div class="text-hex-96999C text-18px mt-6px">开展业务</div>
      </div>
    </div>
  </v-container>
  <v-container class="!pt-100px !pb-100px">
    <div class="pb-60px text-center mb-20px tracking-3px">
      <div class="text-36px mb-80px">我要申请成为服务商</div>
      <v-form @submit.prevent="submit">
        <div class="shadow-xl text-18px border-1px border-solid border-hex-EE5F2E rounded-20px py-50px px-100px">
          <div class="flex items-center mb-20px">
            <div class="w-150px text-left left-in-1">地区：</div>
            <v-select class="right-in-1 mx-20px" :rules="rules.province" v-model="vueData.provinceId" item-value="id" color="primary" :items="vueData.areaList" label="请选择省"></v-select>
            <v-select class="right-in-2 mx-20px" :rules="rules.city" v-model="vueData.cityId" color="primary" :items="cityList" item-value="id" label="请选择市"></v-select>
            <v-select class="right-in-3 mx-20px" :rules="rules.area" v-model="vueData.areaId" color="primary" :items="areaList" item-value="id" label="请选择县/区"></v-select>
          </div>
          <div class="flex items-center mb-20px">
            <div class="left-in-1 w-150px text-left">联系人：</div>
            <v-text-field class="right-in-1 mx-20px max-w-400px" :rules="rules.contact_name" v-model="vueData.contact_name" color="primary" label="请输入联系人姓名"></v-text-field>
          </div>
          <div class="flex items-center mb-20px">
            <div class="left-in-2 w-150px text-left">联系人手机号：</div>
            <v-text-field class="right-in-2 mx-20px max-w-400px" :rules="rules.contact_tel" v-model="vueData.contact_tel" color="primary" label="请输入联系人手机号"></v-text-field>
          </div>
          <div class="flex items-center mb-20px">
            <div class="left-in-3 w-150px text-left">公司名称：</div>
            <v-text-field class="right-in-2 mx-20px max-w-400px" v-model="vueData.seller_name" color="primary" label="请输入公司名称"></v-text-field>
          </div>
          <div class="btn-scale">
            <v-btn
              color="primary"
              type="submit"
              height="56px"
              width="280px"
              :loading="vueData.loading"
              variant="flat">
              <span class="text-17px">立即提交</span>
            </v-btn>
          </div>
        </div>
      </v-form>
    </div>
  </v-container>
</div>
</template>

<style scoped>
</style>
